<template>
  <!-- 账号列表 -->
  <div>
    <el-card class="box-card">
      <!-- 标题 -->
      <div slot="header" class="clearfix">
        <span>账号列表</span>
      </div>
      <!-- 账号 -->
      <el-table
        @selection-change="handleSelectionChange"
        style="width: 100%"
        :data="tableData"
        ref="table"
      >
        <el-table-column type="selection" width="80"> </el-table-column>
        <el-table-column label="账号" width="150">
          <template slot-scope="scope">{{ scope.row.account }}</template>
        </el-table-column>
        <!-- 用户组 -->
        <el-table-column label="用户组" width="150">
          <template slot-scope="scope">{{ scope.row.userGroup }}</template>
        </el-table-column>
        <!-- 创建时间 -->
        <el-table-column label="创建时间" width="150">
          <template slot-scope="scope">{{
            scope.row.ctime | normalizeYmd
          }}</template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作">
          <!-- 作用域插槽 -->
          <template slot-scope="scope">
            <!-- 编辑按钮 -->
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <!-- 删除按钮 -->
            <el-popconfirm
              title="这是一段内容确定删除吗？"
              @cancel="cancleDelete"
              @confirm="handleDelete(scope.row)"
            >
              <el-button slot="reference" size="mini" type="danger">
                删除
              </el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagin">
        <!--分页 -->
        <!-- size-change  改变时会触发	每页条数
        current-change 改变时会触发	当前页
        current-page 当前页数
        page-sizes 每页显示个数选择器的选项设置
        page-size 每页显示条目个数
        layout 组件布局
        total 总页数
        -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <div class="btn">
        <!-- 批量删除 -->
        <el-popover placement="top" width="160" v-model="batchVisible">
          <p>是否确定批量删除用户吗？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="batchVisible = false;$message({type:'info',message:'取消批量删除'})"
              >取消</el-button
            >
            <el-button type="primary" size="mini" @click="handleBatchDelete"
              >确定</el-button
            >
          </div>
          <el-button type="danger" slot="reference" size="small"
            >批量删除</el-button
          >
        </el-popover>
        <!-- 取消选择 -->
        <el-button type="primary" @click="handleClearTableCheckbox" size="small"
          >取消选择</el-button
        >
        <!-- 编辑对话框 -->
        <el-dialog title="编辑用户" :visible.sync="dialogFormVisible" class="dialog">
          <el-form :model="editForm" label-width="80px" class="editForm">
            <el-form-item label="账号">
              <el-input
                v-model="editForm.account"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="用户组">
              <el-select
                v-model="editForm.userGroup"
                placeholder="请选择用户组"
              >
                <el-option label="超级管理员" value="超级管理员"></el-option>
                <el-option label="普通管理员" value="普通管理员"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleEditForm">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
// 引入ajax函数
import { getAccountList, deleteAccount, batchdelAccount, editAccount } from '@/api/user'
export default {
  // 数据
  data () {
    return {
      // 表格数据 
      tableData: [],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      editForm: {
        account: '',
        userGroup: ''
      },
      batchVisible: false,
      dialogFormVisible: false
    }
  },
  //方法
  methods: {
    //获取数据
    async getData () {
      let res = await getAccountList({ currentPage: this.currentPage, pageSize: this.pageSize })
      let { total, data } = res.data
      this.total = total//总页数赋值
      //如果获取数据为空 且不是第一页 就拉取上一页的数据
      if (data.length == 0 && this.currentPage != 1) {
        this.currentPage -= 1
        this.getData()
        return
      }
      this.tableData = data
    },
    // 编辑
    handleEdit (row) {
      //显示弹窗
      this.dialogFormVisible = true
      //回填数据
      let { id, account, userGroup } = row
      this.editForm = { id, account, userGroup }
      console.log('index :>> ', this.editForm)
      console.log('row :>> ', row)
    },
    //取消删除
    cancleDelete () {
      this.$message({
        type: 'info',
        message: '取消成功'
      })
    },
    // 删除
    async handleDelete (index,row) {
      let res = await deleteAccount({ id: row.id })
      let { code, msg } = res.data
      if (code == 0) {
        //删除成功提示
        this.$message({
          type: 'success',
          message: msg
        })
        //重新拉取数据 
        this.getData()
      } else {
        this.$message.error(msg)
      }
      console.log('index :>> ', index)
      console.log('row :>> ', row)
    },
    handleSizeChange (val) {
      // val 改变条数显示条数
      //给页码赋值
      this.pageSize = val
      //拉取数据
      this.getData()
    },
    //多选触发函数
    handleSelectionChange (val) {
      //给ids赋值数据，把数组转化字符串
      this.ids = JSON.stringify(val.map(v => v.id))
    },
    // 改变时会触发	当前页
    handleCurrentChange (val) {
      console.log('val :>> ', val);
      this.currentPage = val
      this.getData()
    },
    //取消选中函数
    handleClearTableCheckbox () {
      this.$refs.table.clearSelection()
    },
    //批量删除数据
    async handleBatchDelete () {
      if (!this.ids) {
        this.$message.error('选择要删除的内容')
        this.batchVisible = false
        return
      }
      let res =await batchdelAccount({ ids: this.ids })
      console.log('res :>> ', res);
      // 解构对象
      let { code, msg } = res.data
      if (code == 0) {
        this.$message({
          type: 'success',
          message: msg
        })
        //重新拉取数据
        this.getData()
        //关闭弹出
        this.batchVisible = false
      } else {
        this.$$message.error(msg)
      }
    },
    handleEditForm () {
      //消息确定是否操作编辑
      this.$confirm('是否编辑此用户？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await editAccount({ ...this.editForm })
        let { code, msg } = res.data
        if (code == 0) {
          this.$message({
            type: 'success',
            message: msg,
          })
          //拉取数据
          this.getData()
        } else {
          this.$message.error(msg)
        }
        //关闭弹窗
        this.dialogFormVisible = false
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消编辑'
        })
      })
    }
  },
  created () {
    this.getData()
  }
}
</script>

<style lang="less" scoped>
.btn {
  margin-top: 10px;
}
.pagin {
  margin-top: 20px;
}
.editForm{
  /deep/.el-input__inner{
    width: 400px;
  }
}
</style>